<template>
  <j-modal :title="title" :width="800" :visible="visible" :maskClosable="false" :fullscreen="true" @close="close">
    <template slot="footer">
      <a-button key="back" style="padding-left: 8px; padding-right: 8px" @click="close(false)"> 关闭 </a-button>
      <template v-if="active == completeTab">
        <a-button
          :disabled="!!status &&  status != '0' && status != '1'"
          v-permission="['10110']"
          type="primary"
          @click="showConfirm"
          style="padding-left: 8px; padding-right: 8px"
        >
          完成准备阶段
        </a-button>
        <a-button
          :disabled="status !== '2'"
          v-permission="['10120']"
          @click="setApproveReason('9')"
          style="padding-left: 8px; padding-right: 8px"
        >
          同意
        </a-button>
        <a-button
          :disabled="status !== '2'"
          v-permission="['10120']"
          type="danger"
          @click="setApproveReason('1')"
          style="padding-left: 8px; padding-right: 8px"
        >
          拒绝
        </a-button>
        <a-popconfirm title="确定撤销吗?" @confirm="() => returnPro()">
          <a-button type="danger" key="save" style="padding-left: 8px; padding-right: 8px;margin-right: 18px" >
            撤销到计划
          </a-button>
        </a-popconfirm>
      </template>

    </template>
    <div style="margin-bottom:20px;">
      <div class="detail">
        <div class="name">
          {{ model.name }}<span>{{ model.stageText }}</span>
        </div>
        <div class="list">
          <div>
            项目编号：<span>{{ model.number }}</span>
          </div>
          <div>
            项目类别：<span>{{ model.type_dictText }}</span>
          </div>
          <div>
            主审计单位：<span>{{ $store.getters.departInfo.departName }}</span>
          </div>
          <div>
            被审计单位：<span>{{ model.bsjdwName }}</span>
          </div>
          <div>
            审计期间：<span>{{ model.startDate }} ~ {{ model.endDate }}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-tabs type="card" @change="tabsChange" class="tabs_style">
        <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.title">
          <component
            v-if="isShow && active == item.key"
            :is="`${item.key}`"
            :id="model.id"
            :stage="model.stage"
            :type="viewTypeId[item.value]"
            :proType="model.type"
            :proTypeName="model.type_dictText"
          ></component>
        </a-tab-pane>
      </a-tabs>
    </div>
    <SelectApprove ref="approver" :id="model.id" @submitData="handleSubmit"></SelectApprove>
    <SetReason ref="setReason" @approveReason="approveData"></SetReason>
  </j-modal>
</template>
<script>
import cyxx from '../commView/cyxx/index'
import ssfa from '../commView/ssfa/index'
import bcxsjws from '../commView/bcxsjws/index'
import bsjdwzl from '../commView/bsjdwzl/index'
import sjtzs from '../commView/sjtzs/index'
import shjl from '../commView/shjl/index'
import { WORK_AUTH } from '@/store/mutation-types'
import { getAction } from '@/api/manage'
import viewTypeId from '../commView/public/typeId'
import SetReason from '../commView/public/SetReason'
import SelectApprove from './SelectApprover'
import { butStatus } from '../butStatus'

export default {
  name: 'contentView',
  components: {
    cyxx,
    ssfa,
    bcxsjws,
    bsjdwzl,
    sjtzs,
    shjl,
    SetReason,
    SelectApprove,
  },
  mixins: [butStatus],
  data() {
    return {
      active: 'cyxx',
      completeTab:'ssfa',
      viewTypeId: viewTypeId,
      typeId: viewTypeId['审计准备阶段整体'],
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      url: {
        permission: '/sys/permission/getButtonByUser',
        submit: '/common/sjProcCommon/submitAudit',
        approve: '/common/sjProcCommon/zyApplyCommit',
        butStatus: '/sjxmzygl/sjWorkUsers/queryStageInfo',
        returnPro: '/sjxmzygl/sjWorkUsers/recallPlanStage',
      },
      model: {},
      tabs: [
        { key: 'cyxx', title: '成员信息', value: '成员信息' },
        { key: 'sjtzs', title: '审计通知书', value: '审计通知书' },
        { key: 'bsjdwzl', title: '被审计单位资料', value: '被审计单位资料' },
        { key: 'bcxsjws', title: '审计参考资料', value: '审计文书模板' },
        { key: 'ssfa', title: '实施方案', value: '实施方案' },
        { key: 'shjl', title: '审核记录', value: '审计准备阶段整体' },
      ],
      isShow: false,
    }
  },
  methods: {
    tabsChange(key) {
      this.active = key
    },
    getWorkAuth() {
      return new Promise((next)=>{
        this.isShow = false
        getAction(this.url.permission, { proId: this.model.id }).then((res) => {
          if (res.success) {
            this.isShow = true
            let workAuthData = res.result.workButtonAuth
            sessionStorage.setItem(WORK_AUTH, JSON.stringify(workAuthData))
          }
          next();
        })
      })
    },
    async edit(record) {
      this.model = Object.assign({}, record)
      await this.getWorkAuth()
      this.getStstus()
      this.active = 'cyxx'
      this.visible = true
    },

    returnPro() {
      getAction(this.url.returnPro, {
        proId: this.model.id
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.close()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    close() {
      this.visible = false
    },
  },
}
</script>

<style lang='less' scoped>
@import '~@assets/less/tableTheme.less';
@import '../../css/checkAndEdit.less';

</style>
